import Layouts from '@/components/Layout';
import {
  Avatar,
  Form,
  Tabs,
  Input,
  Button,
  Space,
  RadioChangeEvent,
  Radio,
  Select,
  Modal,
  Badge,
  Pagination,
  message,
  Upload,
  UploadFile,
  UploadProps,
  Spin,
  Empty,
} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import './index.less';
import banner from '../../../public/images/skin-number-title.209d2ae7.png';
import { CameraOutlined, UserOutlined } from '@ant-design/icons';
import Tour from '@/components/Tour';
import Activity from '@/components/Activity';
import { history, useDispatch, useLocation, useSelector } from 'umi';
import { LetterList, UserInfo } from '@/types/user';
import { changeUserPwd, editUserInfo, getLetterList, getUserInfo } from '@/service/api/user';
import { CommonData } from '@/types/common';
import { getType } from '@/service/api/common';
import { CitiesList, CountriesList } from '@/types/loaction';
import { getCityByCountry, getCountriesList } from '@/service/api/location';
import configs from '../../../config/env';
import ImgCrop from 'antd-img-crop';
import {
  ActivityList,
  ActivitySearch,
  TourList,
  TourOrderList,
  TourSearch,
} from '@/types/touractivity';
import {
  getActivityList,
  getOrderList,
  getTourList,
  getWishList,
} from '@/service/api/touractivity';
const tl = (
  <div className="u_banner">
    <img src={banner} alt="" />
  </div>
);
const UserCenter: React.FC = () => {
  const location = useLocation();
  const dispatch = useDispatch();
  const firstUpload = useRef(true); // 记录是否是首次加载页面
  const headers = {
    Authorization: localStorage.getItem('token') as string,
  };
  const uploadImgUrl = `${
    configs[process.env.API_ENV as any].API_SERVER
  }/system/user/profile/avatar`; // 上传的图片服务器地址
  // 用户信息
  const userInfo = useSelector(
    (state: { userInfoModel: { userInfo: UserInfo } }) => state.userInfoModel.userInfo,
  );
  const [formUserInfo] = Form.useForm();
  const [formChangePwd] = Form.useForm();
  const [activeKey, setActiveKey] = useState<string>('1');
  const [hobby, setHobby] = useState<{ label: string; value: string }[]>([]);
  const [countriesData, setCountriesData] = useState<{ label: string; value: string }[]>([]);
  const [cityData, setCityData] = useState<{ label: string; value: string }[]>([]);
  const [userInfoSaveBtnLoading, setUserInfoSaveBtnLoading] = useState<boolean>(false);
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [fileTypeVaild, setfileTypeVaild] = useState<boolean>(false);
  const [changePwdBtnLoading, setChangePwdBtnLoading] = useState<boolean>(false);
  // -----------------主办旅游-----------------
  const [tourList, setTourList] = useState<TourList[]>([]);
  const [searchTourListQuery, setSearchTourListQuery] = useState<TourSearch>({
    pageNum: 1,
    pageSize: 6,
  });
  const [tourListTotal, setTourListTotal] = useState<number>(0);
  const [tourListLoading, setTourListLoading] = useState<boolean>(false);
  // -----------------主办旅游-----------------
  // ------------------分享活动----------------
  const [actList, setActList] = useState<ActivityList[]>([]);
  const [searchActListQuery, setSearchActListQuery] = useState<ActivitySearch>({
    pageNum: 1,
    pageSize: 6,
  });
  const [actListTotal, setActListTotal] = useState<number>(0);
  const [actListLoading, setActListLoading] = useState<boolean>(false);
  // --------------------分享活动----------------------
  // ---------------------预定的冒险------------------
  const [tourOrderList, setTourOrderList] = useState<TourOrderList[]>([]);
  const [tourOrderListTotal, setTourOrderListTotal] = useState<number>(0);
  const [searchTourOrderListQuery, setSearchTourOrderListQuery] = useState<{
    pageNum: number;
    pageSize: number;
    userId?: number;
  }>({
    pageNum: 1,
    pageSize: 6,
  });
  const [tourOrderLoading, setTourOrderLoading] = useState<boolean>(false);
  // ---------------------预定的冒险------------------
  // ---------------------愿望单----------------------
  const [wishList, setWishList] = useState<TourOrderList[]>([]);
  const [searchWishListQuery, setSearchWishListQuery] = useState<{
    pageNum: number;
    pageSize: number;
    userId?: number;
  }>({
    pageNum: 1,
    pageSize: 6,
  });
  const [wishListLoading, setWishListLoading] = useState<boolean>(false);
  const [wishListTotal, setWishListTotal] = useState<number>(0);
  // ---------------------愿望单----------------------
  // ----------------------私信----------------------
  const [searchLetterListQuery, setSearchLetterListQuery] = useState<{
    pageNum: number;
    pageSize: number;
  }>({
    pageNum: 1,
    pageSize: 8,
  });
  const [letterList, setLetterList] = useState<LetterList[]>([]);
  const [letterListTotal, setLetterListTotal] = useState<number>(0);
  const [letterListLoading, setLetterListLoading] = useState<boolean>(false);
  const onPreview = async (file: UploadFile) => {
    let src = file.url as string;
    if (!src) {
      src = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj as RcFile);
        reader.onload = () => resolve(reader.result as string);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow?.document.write(image.outerHTML);
  };
  // 获取主办旅游
  const getTourListByUser = async () => {
    try {
      setTourListLoading(true);
      const { rows, total }: { rows: TourList[]; total: number } = await getTourList({
        ...searchTourListQuery,
        userId: userInfo.userId,
      });
      setTourList(rows);
      setTourListTotal(total);
    } finally {
      setTourListLoading(false);
    }
  };
  const handleChangePageTourList = (page: number, pageSize: number) => {
    setSearchTourListQuery({
      pageNum: page,
      pageSize,
      userId: userInfo.userId,
    });
  };
  // 获取分享活动
  const getActListByUser = async () => {
    try {
      setActListLoading(true);
      const { rows, total }: { rows: ActivityList[]; total: number } = await getActivityList({
        ...searchActListQuery,
        userId: userInfo.userId,
      });
      setActList(rows);
      setActListTotal(total);
    } finally {
      setActListLoading(false);
    }
  };
  const handleChangePageActList = (page: number, pageSize: number) => {
    setSearchActListQuery({
      pageNum: page,
      pageSize,
      userId: userInfo.userId,
    });
  };
  // 获取预定的的冒险
  const getTourListOrder = async () => {
    try {
      setTourOrderLoading(true);
      const { rows, total }: { rows: TourOrderList[]; total: number } = await getOrderList({
        ...searchTourOrderListQuery,
        userId: userInfo.userId,
      });
      setTourOrderList(rows);
      setTourOrderListTotal(total);
    } finally {
      setTourOrderLoading(false);
    }
  };
  const handleChangePageTourOrderList = (page: number, pageSize: number) => {
    setSearchTourOrderListQuery({
      pageNum: page,
      pageSize,
      userId: userInfo.userId,
    });
  };
  const getWishListData = async () => {
    try {
      setWishListLoading(true);
      const { rows, total }: { rows: TourOrderList[]; total: number } = await getWishList({
        ...searchWishListQuery,
        userId: userInfo.userId,
      });
      setWishList(rows);
      setWishListTotal(total);
    } finally {
      setWishListLoading(false);
    }
  };
  const handleChangePageWishList = (page: number, pageSize: number) => {
    setSearchWishListQuery({
      pageNum: page,
      pageSize,
      userId: userInfo.userId,
    });
  };
  useEffect(() => {
    if (firstUpload.current) {
      // 首次加载不执行
      firstUpload.current = false;
      return;
    }
    getTourListByUser();
  }, [searchTourListQuery]);
  useEffect(() => {
    if (firstUpload.current) {
      // 首次加载不执行
      firstUpload.current = false;
      return;
    }
    getActListByUser();
  }, [searchActListQuery]);
  useEffect(() => {
    if (firstUpload.current) {
      // 首次加载不执行
      firstUpload.current = false;
      return;
    }
    getTourListOrder();
  }, [searchTourOrderListQuery]);
  useEffect(() => {
    if (firstUpload.current) {
      // 首次加载不执行
      firstUpload.current = false;
      return;
    }
    getWishListData();
  }, [searchWishListQuery]);
  useEffect(() => {
    if (firstUpload.current) {
      // 首次加载不执行
      firstUpload.current = false;
      return;
    }
    getLetterListData();
  }, [searchLetterListQuery]);
  // 获取私信列表
  const getLetterListData = async () => {
    try {
      setLetterListLoading(true);
      const { rows, total }: { rows: LetterList[]; total: number } = await getLetterList(
        searchLetterListQuery,
      );
      setLetterList(rows);
      setLetterListTotal(total);
    } finally {
      setLetterListLoading(false);
    }
  };
  const handleChangePageLetterList = (page: number, pageSize: number) => {
    setSearchLetterListQuery({
      pageNum: page,
      pageSize,
    });
  };
  const onChange = (key: string) => {
    setActiveKey(key);
    if (location['query'].tab) {
      // 清空参数
      history.push('/user-center');
    }
    const userId = userInfo.userId;
    if (key === '3') {
      setSearchLetterListQuery((data) => ({ ...data, pageNum: 1 }));
    } else if (key === '4') {
      setSearchTourListQuery((data) => ({ ...data, pageNum: 1, userId }));
    } else if (key === '5') {
      setSearchActListQuery((data) => ({ ...data, pageNum: 1, userId }));
    } else if (key === '6') {
      setSearchTourOrderListQuery((data) => ({ ...data, pageNum: 1, userId }));
    } else if (key === '7') {
      setSearchWishListQuery((data) => ({ ...data, pageNum: 1, userId }));
    }
  };
  const resetFormUserInfo = () => {
    formUserInfo.resetFields();
  };
  const onFinishPwdForm = async (values: any) => {
    console.log('Success:', values);
    try {
      setChangePwdBtnLoading(true);
      if (values.confirm !== values.newPassword) {
        return message.error('两次密码输入不一致');
      }
      const res: any = await changeUserPwd({
        oldPassword: values.oldPassword,
        newPassword: values.newPassword,
      });
      if (res) {
        localStorage.removeItem('token');
        dispatch({ type: 'userInfoModel/updateLoginState', isLogin: false });
        message.success('密码修改成功，请重新登录');
        history.replace('/login');
      }
    } finally {
      setChangePwdBtnLoading(false);
    }
  };
  const onFinishUserInfo = async (values: any) => {
    try {
      setUserInfoSaveBtnLoading(true);
      const res: any = await editUserInfo({
        ...values,
        tags: values.tags.toString(),
      });
      if (res) {
        message.success(res.msg);
        getUserInfoData();
      }
    } finally {
      setUserInfoSaveBtnLoading(false);
    }
  };
  const [value, setValue] = useState(1);

  const onChange2 = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  const handleChange = (value: string | string[]) => {
    console.log(`Selected: ${value}`);
  };
  // 获取用户信息
  const getUserInfoData = async () => {
    if (localStorage.getItem('token')) {
      const { data }: { data: UserInfo } = await getUserInfo();
      dispatch({ type: 'userInfoModel/updateUserInfo', userInfo: data });
      dispatch({ type: 'userInfoModel/updateLoginState', isLogin: true });
      const { data: cityOption }: { data: CitiesList[] } = await getCityByCountry({
        country: data.country as string,
      });
      let arr = cityOption.map((item) => ({
        label: item.cname,
        value: item.cname,
      }));
      setCityData(arr);
      let tags = [];
      if (data.tags) {
        tags = data.tags.split(',').map((item: string) => ({ label: item, value: item }));
      }
      formUserInfo.setFieldsValue({
        nickName: data.nickName,
        email: data.email,
        phonenumber: data.phonenumber,
        sex: data.sex,
        tags,
        remark: data.remark,
        country: data.country,
        city: data.city,
      });
    }
  };
  const getTypeData = async () => {
    const { data }: { data: CommonData[] } = await getType({
      dictType: 'adv_interest',
    });
    let arr = data.map((item) => ({
      label: item.dictValue,
      value: item.dictValue,
    }));
    setHobby(arr);
  };
  const getCountryData = async () => {
    const { rows }: { rows: CountriesList[] } = await getCountriesList({
      pageNum: 1,
      pageSize: 240, // 全部国家列表
    });
    let arr = rows.map((item) => ({
      label: item.cname,
      value: item.cname,
    }));
    setCountriesData(arr);
  };
  const onChangeCountry = async (value: string) => {
    if (value === undefined || value === '') {
      setCityData([]);
    }
    const { data }: { data: CitiesList[] } = await getCityByCountry({
      country: value,
    });
    let arr = data.map((item) => ({
      label: item.cname,
      value: item.cname,
    }));
    setCityData(arr);
    formUserInfo.setFieldsValue({
      city: '',
    });
  };
  const beforeUpload = (file: File) => {
    const isFileTypeValid =
      file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg';
    if (!isFileTypeValid) {
      message.error('只能上传 JPG/PNG/JPEG 格式的文件!');
    }
    const isLt5M = file.size / 1024 / 1024 < 5;
    if (!isLt5M) {
      message.error('图片必须小于 5MB!');
    }
    setfileTypeVaild(isFileTypeValid && isLt5M);
    return isFileTypeValid && isLt5M;
  };
  const onChangeUpload: UploadProps['onChange'] = ({ fileList: newFileList }) => {
    setFileList(newFileList);
    if (fileTypeVaild) {
      // setFileList(newFileList);
      newFileList.forEach(async (item) => {
        if (item.response?.code !== 200 && item.status === 'done') {
          if (item.response?.code === 401) {
            localStorage.removeItem('token');
            dispatch({ type: 'userInfoModel/updateLoginState', isLogin: false });
            message.error('登录超时或者未登陆，请登录');
            history.replace('/login');
            return;
          }
          return message.error(item.response?.msg);
        } else if (item.response?.code === 200 && item.status === 'done') {
          handleCancel();
          await getUserInfoData();
          message.success('更换头像成功');
        }
      });
    } else {
      setFileList([]);
    }
  };
  const onUploadFail = () => {
    message.error('头像上传失败');
    setFileList([]);
  };
  useEffect(() => {
    if (location['query'].tab === 'message') {
      setActiveKey('3');
    }
    getUserInfoData();
    getTypeData();
    getCountryData();
  }, []);
  const pane1 = (
    <Form
      name="basic"
      labelCol={{ span: 2 }}
      onFinish={onFinishUserInfo}
      autoComplete="off"
      form={formUserInfo}
    >
      <Form.Item label="昵称" name="nickName" rules={[{ required: true, message: '请输入昵称' }]}>
        <Input placeholder="请输入昵称" />
      </Form.Item>

      <Form.Item label="邮箱" name="email">
        <Input />
      </Form.Item>
      <Form.Item label="手机" name="phonenumber">
        <Input />
      </Form.Item>
      <Form.Item label="性别" name="sex" rules={[{ required: true, message: '请输入性别' }]}>
        <Radio.Group onChange={onChange2} value={value}>
          <Radio value="0">男</Radio>
          <Radio value="1">女</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item label="兴趣" name="tags" rules={[{ required: true, message: '请选择兴趣' }]}>
        <Select
          mode="multiple"
          maxTagCount="responsive"
          placeholder="请选择兴趣"
          onChange={handleChange}
          style={{ width: '100%' }}
          options={hobby}
          allowClear
        />
      </Form.Item>
      <Form.Item label="个人简介" name="remark">
        <Input.TextArea showCount maxLength={200} style={{ height: 120 }} />
      </Form.Item>
      <Form.Item label="国家" name="country" rules={[{ required: true, message: '请选择国家' }]}>
        <Select onChange={onChangeCountry} options={countriesData} />
      </Form.Item>
      <Form.Item label="城市" name="city" rules={[{ required: true, message: '请选择城市' }]}>
        <Select options={cityData} />
      </Form.Item>
      <Form.Item style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Space>
          <Button onClick={resetFormUserInfo}>重置</Button>
          <Button
            type="primary"
            htmlType="submit"
            style={{ width: 300 }}
            loading={userInfoSaveBtnLoading}
          >
            保存
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
  const pane2 = (
    <Form
      name="basic"
      onFinish={onFinishPwdForm}
      form={formChangePwd}
      labelCol={{ span: 2 }}
      autoComplete="off"
    >
      <Form.Item
        label="原密码"
        name="oldPassword"
        rules={[{ required: true, message: '请输入原密码' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        label="新密码"
        name="newPassword"
        rules={[{ required: true, message: '请输入新密码' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        label="确认密码"
        name="confirm"
        rules={[{ required: true, message: '请输入确认密码' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Space>
          <Button
            onClick={() => {
              formChangePwd.resetFields();
            }}
          >
            重置
          </Button>
          <Button
            type="primary"
            htmlType="submit"
            style={{ width: 300 }}
            loading={changePwdBtnLoading}
          >
            保存
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
    setFileList([
      {
        uid: '-1',
        name: 'image.png',
        status: 'done',
        url: userInfo.avatar
          ? configs[process.env.API_ENV as any].API_SERVER + userInfo.avatar
          : '/images/cat.e69c9c17.jpg/',
      },
    ]);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const toMsgDetail = (id: number, nickName: string | null, userName: string) => {
    history.push({
      pathname: '/msg-detail/' + id,
      query: {
        nickName: nickName ?? userName,
      },
    });
  };
  const pane3 = (
    <div className="dir_msg_wrapper">
      {/* <div style={{ display: 'flex', marginBottom: 20, justifyContent: 'flex-end' }}>
        <Button>一键已读</Button>
      </div> */}
      <Spin tip="正在玩命加载..." size="large" spinning={letterListLoading}>
        {letterList.map((item) => (
          <div
            key={item.letterUserId}
            className="msg_item"
            onClick={() => {
              toMsgDetail(item.letterUserId, item.letterUser.nickName, item.letterUser.userName);
            }}
          >
            <div className="iner">
              <div className="left">
                {item.advLetter?.isRead ? (
                  <Badge count={item.unreadQuantity}>
                    <Avatar
                      shape="square"
                      size={60}
                      src={
                        item.letterUser.avatar
                          ? configs[process.env.API_ENV as any].API_SERVER + item.letterUser.avatar
                          : '/images/act.e69c9c17.jpg'
                      }
                    />
                  </Badge>
                ) : (
                  <Badge>
                    <Avatar
                      shape="square"
                      size={60}
                      src={
                        item.letterUser.avatar
                          ? configs[process.env.API_ENV as any].API_SERVER + item.letterUser.avatar
                          : '/images/act.e69c9c17.jpg'
                      }
                    />
                  </Badge>
                )}
              </div>
              <div className="center">
                <div className="top_u_name">{item.letterUser.nickName}</div>
                <div className="bottom_msg">{item.advLetter?.content}</div>
              </div>
            </div>
            <div className="right">{item.advLetter?.createTime}</div>
          </div>
        ))}
      </Spin>

      <div className="pagination_wrapper">
        {letterListTotal !== 0 && (
          <Pagination
            current={searchLetterListQuery.pageNum}
            total={letterListTotal}
            showTitle
            pageSize={searchLetterListQuery.pageSize}
            showSizeChanger={false}
            onChange={handleChangePageLetterList}
          />
        )}
        {!letterListLoading && letterListTotal === 0 && (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </div>
    </div>
  );
  const pane4 = (
    <div>
      <Spin tip="正在玩命加载..." size="large" spinning={tourListLoading}>
        <div className="data_pane">
          {tourList.map((item) => (
            <Tour
              key={item.id}
              title={item.title}
              id={item.id}
              time={item.time}
              price={item.price}
              remark={item.remark}
              userInfo={item.user}
              bacImg={item.bacImg}
              tags={item.tags}
              widths={280}
            ></Tour>
          ))}
        </div>
      </Spin>
      <div className="pagination_wrapper">
        {tourListTotal !== 0 && (
          <Pagination
            current={searchTourListQuery.pageNum}
            total={tourListTotal}
            showTitle
            pageSize={searchTourListQuery.pageSize}
            showSizeChanger={false}
            onChange={handleChangePageTourList}
          />
        )}
        {!tourListLoading && tourListTotal === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
      </div>
    </div>
  );
  const pane5 = (
    <div>
      <Spin tip="正在玩命加载..." size="large" spinning={actListLoading}>
        <div className="data_pane">
          {actList.map((item) => (
            <Activity
              key={item.id}
              id={item.id}
              country={item.country}
              remark={item.describes}
              userInfo={item.user}
              imgUrl={item.imgUrl}
              title={item.title}
              tags={item.tags}
              city={item.city}
              widths={280}
            ></Activity>
          ))}
        </div>
      </Spin>

      <div className="pagination_wrapper">
        {actListTotal !== 0 && (
          <Pagination
            current={searchActListQuery.pageNum}
            total={actListTotal}
            showTitle
            pageSize={searchActListQuery.pageSize}
            showSizeChanger={false}
            onChange={handleChangePageActList}
          />
        )}
        {!actListLoading && actListTotal === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
      </div>
    </div>
  );
  const pane6 = (
    <div>
      <Spin tip="正在玩命加载..." size="large" spinning={tourOrderLoading}>
        <div className="data_pane">
          {tourOrderList.map((item) => (
            <Tour
              key={item.advDetail.id}
              title={item.advDetail.title}
              id={item.advDetail.id}
              time={item.advDetail.time}
              price={item.advDetail.price}
              remark={item.advDetail.remark}
              userInfo={item.user}
              bacImg={item.advDetail.bacImg}
              tags={item.advDetail.tags}
              widths={280}
            ></Tour>
          ))}
        </div>
      </Spin>
      <div className="pagination_wrapper">
        {tourOrderListTotal !== 0 && (
          <Pagination
            current={searchTourOrderListQuery.pageNum}
            total={tourOrderListTotal}
            showTitle
            pageSize={searchTourOrderListQuery.pageSize}
            showSizeChanger={false}
            onChange={handleChangePageTourOrderList}
          />
        )}
        {!tourOrderLoading && tourOrderListTotal === 0 && (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </div>
    </div>
  );
  const pane7 = (
    <div>
      <Spin tip="正在玩命加载..." size="large" spinning={wishListLoading}>
        <div className="data_pane">
          {wishList.map((item) => (
            <Tour
              key={item.advDetail.id}
              title={item.advDetail.title}
              id={item.advDetail.id}
              time={item.advDetail.time}
              price={item.advDetail.price}
              remark={item.advDetail.remark}
              userInfo={item.user}
              bacImg={item.advDetail.bacImg}
              tags={item.advDetail.tags}
              widths={280}
            ></Tour>
          ))}
        </div>
      </Spin>
      <div className="pagination_wrapper">
        {wishListTotal !== 0 && (
          <Pagination
            current={searchWishListQuery.pageNum}
            total={wishListTotal}
            showTitle
            pageSize={searchWishListQuery.pageSize}
            showSizeChanger={false}
            onChange={handleChangePageWishList}
          />
        )}
        {!wishListLoading && wishListTotal === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
      </div>
    </div>
  );
  return (
    <Layouts tl={tl}>
      <div className="user_center_container">
        <div className="u_left_wrapper">
          <div className="user_info_wrap">
            <div className="u_avatar" onClick={showModal}>
              <Avatar
                className=""
                size={130}
                src={
                  userInfo.avatar
                    ? configs[process.env.API_ENV as any].API_SERVER + userInfo.avatar
                    : '/images/cat.e69c9c17.jpg'
                }
              />
              <div className="mask">
                <div className="ic">
                  <CameraOutlined />
                </div>
              </div>
            </div>
            <p className="user_name">{userInfo.nickName}</p>
            <p className="user_remark">{userInfo.remark ?? '这个人很懒，什么都没留下'}</p>
          </div>
        </div>
        <div className="u_right_wrapper">
          <Tabs
            activeKey={activeKey}
            onChange={onChange}
            items={[
              {
                label: `个人信息`,
                key: '1',
                children: pane1,
              },
              {
                label: `修改密码`,
                key: '2',
                children: pane2,
              },
              {
                label: `我的私信`,
                key: '3',
                children: pane3,
              },
              {
                label: `主办旅游`,
                key: '4',
                children: pane4,
              },
              {
                label: `分享活动`,
                key: '5',
                children: pane5,
              },
              {
                label: `预定的冒险`,
                key: '6',
                children: pane6,
              },
              {
                label: `愿望单`,
                key: '7',
                children: pane7,
              },
            ]}
          />
        </div>
      </div>
      <Modal
        title="修改头像"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width={500}
        footer={null}
      >
        <ImgCrop rotate modalOk="确定" modalCancel="取消" onUploadFail={onUploadFail} shape="round">
          <Upload
            fileList={fileList}
            onPreview={onPreview}
            onChange={onChangeUpload}
            action={uploadImgUrl}
            listType="picture-card"
            beforeUpload={beforeUpload}
            headers={headers}
            name="avatarfile"
          >
            {fileList.length < 1 && '+ Upload'}
          </Upload>
        </ImgCrop>
      </Modal>
    </Layouts>
  );
};
export default UserCenter;
